<template>
	<view>
		<view>
			<!-- #ifdef MP -->
			<!-- MP 导航栏1 -->
			<view class="flex align-center px-1 bg-light fixed-top" style="height: 44px;">
				<view class="flex flex-1 rounded-circle bg-white" style="color:#959FA0;line-height: 30px;"
				@click="$Util.navigateTo('search')">
					<text class="iconfont iconsousuokuang mx-1" style="font-size: 22px; "></text>
					<text>热门搜索：uni-app</text>
					<!-- <input type="text" placeholder="热门搜索：uni-app" style="height: 30px;" /> -->
				</view>
				<view class="m-1" style="color: #959FA0;" @click="$Util.switchTab(1)">分类</view>
			</view>
			<!-- 由于顶部固定的导航栏会遮住页面内容，因此这里需要做一个站位view -->
			<view style="min-height: 44px;"></view>
			<!-- #endif -->
			<!-- 轮播图 -->
			<view class="px-3 py-2">
				<swiper-dot :current="current" :list="swipers">
					<swiper circular :current="current" :autoplay="true" :interval="3000" :duration="500"
						style="height: 300rpx;" @change="swiperChange">
						<swiper-item v-for="(item,index) in swipers" :key="index" @click="goTo(item)">
							<image :src="item.src" mode="aspectFill" class="rounded-lg"
									style="height: 300rpx;width: 100%;"></image>
						</swiper-item>
					</swiper>
				</swiper-dot>
			</view>
			<!-- 分割线 -->
			<view class="f-divider"></view>

			<!-- 列表一 -->
			<card title="为你推荐" @refresh="doRefresh(list1)">
				<view style="padding: 0 15rpx;" class="flex flex-wrap">
					<view v-for="(item,index) in list1.data" :key="index" class="border rounded-lg position-relative"
					@click="goTo(item)"	style="min-height: 5rpx;width: 328rpx; margin: 15rpx 15rpx;">
						<image :src="item.cover+'/medium'" mode="aspectFill" class="rounded-top-lg"
							style="width: 100%; height: 220rpx;"></image>
						<view class="text-white position-absolute flex align-center"
							style="height: 68rpx; right: 0; left: 0; top:155rpx; background-image: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.8));">
							<text class="iconfont iconbofangshu font-md mx-1"></text>
							<text class="font-sm text-white">{{$Time.getCounts(item.video.play_count)}}</text>
							<text class="iconfont icondanmushu font-md mx-1"></text>
							<text class="font-sm text-white">{{$Time.getCounts(item.video.danmu_count)}}</text>
						</view>
						<view class="p-1">
							<view class="font text-ellipsis">{{item.video.title}}</view>
							<view class="flex align-center justify-between text-light-muted">
								<text class="font">{{item.video.category.title}}</text>
								<text class="iconfont icongengduo"></text>
							</view>
						</view>
					</view>
				</view>
			</card>
			<!-- 分割线 -->
			<view class="f-divider"></view>

			<!-- 列表二 -->
			<card title="为你推荐" id="recommend_videos" @refresh="doRefresh(list2)">
				<view style="padding: 0 15rpx;" class="flex flex-wrap">
					<view v-for="(item,index) in list2.data" :key="index" class=" rounded-lg position-relative"
						style="min-height: 5rpx;width: 210rpx; margin: 15rpx 15rpx;" @click="goTo(item)" >
						<image :src="item.cover+'/v_small'" mode="aspectFill" class="rounded-lg"
							style="width: 100%; height: 280rpx;"></image>
						<view class="text-white position-absolute flex align-center rounded-bottom-lg"
							style="height: 68rpx; right: 0; left: 0; top:215rpx; background-image: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.8));">
							<text class="iconfont iconbofangshu font-md mx-1"></text>
							<text class="font-sm text-white">{{$Time.getCounts(item.video.play_count)}}</text>
						</view>
						<view class="font text-ellipsis">{{item.video.title}}</view>
					</view>
				</view>
			</card>
			<!-- 分割线 -->
			<view class="f-divider"></view>
			
			<!-- 列表三 -->
			<card title="为你推荐" @refresh="doRefresh(list3)">
				<view style="padding: 0 15rpx;">
					<view v-for="(item,index) in list3.data" :key="index" 
					class="flex border-bottom py-2 px-1 align-center" @click="goTo(item)">
						<image :src="item.cover+'/small'" mode="aspectFill" class="rounded-lg mx-2 flex-shrink"
							style="width: 250rpx; height: 160rpx;"></image>
						<view class="flex-1">
							<view class="text-ellipsis-2 font mb-1 pr-1">{{item.video.title}}</view>
							<view class="font-sm text-light-muted mb-1">{{$Time.gettime(item.video.created_time)}}</view>
							<view class="flex text-light-muted mb-1 justify-between align-center">
								<view class="flex align-center">
									<text class="iconfont iconbofangshu font-md mr-1"></text>
									<text class="font-sm">{{$Time.getCounts(item.video.play_count)}}</text>
									<text class="iconfont icondanmushu font-md mx-1"></text>
									<text class="font-sm">{{$Time.getCounts(item.video.danmu_count)}}</text>
								</view>

								<text class="iconfont icongengduo"></text>
							</view>
						</view>
					</view>
				</view>
			</card>
		</view>
	</view>
</template>

<script>
	import swiperDot from '@/components/common/swiper-dot.vue';
	import card from '@/components/common/card.vue';
	export default {
		components: {
			swiperDot,
			card
		},
		data() {
			return {
				current: 0, //swiper当前图片index
				swipers: [{
					src: "https://dark2000-1300165652.cos.ap-shanghai.myqcloud.com/darklight/qc-swiper.jpg/swiper",
					title: "青春抛物线"
				}, {
					src: "https://dark2000-1300165652.cos.ap-shanghai.myqcloud.com/darklight/tj-swiper.jpg/swiper",
					title: "天机十二宫"
				}, {
					src: "https://dark2000-1300165652.cos.ap-shanghai.myqcloud.com/darklight/xl-swiper.jpg/swiper",
					title: "心灵法医"
				}],
				list1:{
					key:'list1',
					page:1,
					nomore:false,
					data:[]
				},
				list2:{
					key:'list2',
					limit:2,
					page:1,
					nomore:false,
					data:[]
				},
				list3:{
					key:'list3',
					limit:2,
					page:1,
					nomore:false,
					data:[]
				}
			}
		},
		onLoad() {
			this.getAll();
		},
		onNavigationBarButtonTap(e) {
			//console.log("导航栏第" + e.index + "按钮被点击")
			uni.switchTab({
				url:'../cate/cate'
			})
		},
		onNavigationBarSearchInputClicked() {
			//console.log("导航栏输入框被点击")
			uni.navigateTo({
				url:'../search/search'
			})
		},
		methods: {
			doRefresh(mylist){
				if(mylist && mylist.page && mylist.data){
					this.getlist(false,mylist)
				}
			},
			getAll(){
				this.getSwiper();
				this.getlist(true,this.list1);
				this.getlist(true,this.list2);
				this.getlist(true,this.list3);
			},
			getSwiper(){
				let url = `/advertisement_list/1?limit=3&type=1`;
				this.$H.get(url).then(res=>{
					const temp = [];
					res.forEach(item=>{
						temp.push({
							src: this.$H.common.sourceUrl + item.cover,
							title: item.video.title,
							video_id:item.video_id,
						})
					});
					this.swipers = temp;
				})
			},
			getlist(init,mylist){
				if(init){
					// 如果是页面加载，或者刷新，则强制回到初始状态
					mylist.page = 1;
					mylist.nomore = false;
				} else {
					if(mylist.page === 1 && mylist.nomore){
						// 如果当前数据只有一页
						uni.showToast({
							title:'只有一页数据',
							icon:'none'
						})
						return ;
					} else {
						// 当没有数据当时候，就加载第一页当数据
						if(mylist.nomore){
							mylist.page = 1;
							mylist.nomore = false;
						} else {
							// 如果可能还有数据，则通过page++来取下页数据
							mylist.page++;
						}
					}
				}
				let url = '';
				if(mylist.key === 'list1') {
					url = `/advertisement_list/${mylist.page}?limit=2&type=2`;
				} else if (mylist.key === 'list2'){
					url = `/advertisement_list/${mylist.page}?limit=3&type=3`
				} else {
					url = `/advertisement_list/${mylist.page}?limit=2&type=4`
				}
				this.$H.get(url).then(res=>{
					// 需要将所有cover，加上服务器地址
					res.forEach(item=>{
						item.cover = this.$H.common.sourceUrl + item.cover; 
					})
					if(res.length > 0){
						mylist.data = res;
						// 当前页数据不满页时，则需要将nomore设置为false
						if(mylist.key==='list1' || mylist.key==='list3'){
							if(res.length < 2){
								mylist.nomore = true;
							}
						} else {
							if(res.length < 3){
								mylist.nomore = true;
							}
						}
					} else {
						// 如果没有数据，则需要再执行一次getlist()以便回头获取第一页数据
						mylist.nomore = true;
						mylist.page--;
						if(mylist.page > 1){
							// 回头获取第一页数据
							this.getlist(true,mylist);
						} else {
							uni.showToast({
								title:'只有一页数据',
								icon:'none'
							})
						}
					}
				})
			},
			swiperChange(e) {
				this.current = e.detail.current
			},
			goTo(item){
				uni.navigateTo({
					url:'../video-detail/video-detail?id='+item.video_id
				})
			}
		}
	}
</script>

<style>

</style>
